<template>
  <a-modal class="common-modal" :title="$t('other.copyMake')" :footer="null" :width="560" :visible="visible" @cancel="handleCancel" :maskClosable="false" style="top:5%;">
    <a-spin :spinning="confirmLoading">
      <p class="pt-20 mx-20">{{ $t('other.pleaseSelectCopyContents') }}:</p>
      <section class="copy-make-options">
        <!-- <a-checkbox-group :value="checkedList" :options="options" @change="onGroupChange"/> -->
        <a-row>
          <a-col v-for="(item,index) in options" :key="index" :span="24" class="mb-5">
            <a-checkbox :value="item.value" :checked="checkedList.includes(item.value)" @change="onChange" >{{item.label}}</a-checkbox>
          </a-col>
        </a-row>
      </section>
      <div class="common-modal-footer">
        <a-button @click="handleCancel" class="cancel">{{$t('common.cancel')}}</a-button>
        <a-button @click="handleOk" type="primary" class="confirm">{{$t('common.ok')}}</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script setup name="copyMakeModal">
import { ref } from 'vue'
import i18n from '@/locales/index'
const { t } = i18n.global
const emits = defineEmits(['ok'])
let visible = ref(false)
let confirmLoading = ref(false)
let checkedList = ref([])
let options = [
  { label: t('hangManage.baseInfo'), value: 1 },
  { label: t('menu.basic:order'), value: 2 },
  { label: t('hangManage.makeInfo'), value: 3 },
  { label: '制单工序表', value: 4 },
  { label: '工艺路线图', value: 5 }
]

const open = async () => {
  checkedList.value = []
  visible.value = true
}
// const onGroupChange = (checkedValue) => {
//   // if(checkedValue.includes(5) && !checkedValue.includes(4)) checkedValue.push(4)
//   // checkedList.value = checkedValue
// }
const onChange = (e) => {
  let {value, checked} = e.target
  if(checked) {
    if(value ==5 && !checkedList.value.includes(4)) {
      checkedList.value = checkedList.value.concat([4,5])
    } else {
      checkedList.value.push(value)
    }
  } else {
    if(value ==4 ) {
      checkedList.value = checkedList.value.filter(i=> ![4,5].includes(i) )
    } else {
      checkedList.value = checkedList.value.filter(i=> i != value)
    }

  }

}
const handleOk = async () => {
  emits('ok', checkedList.value)
  handleCancel()

};
const handleCancel = () => {
  visible.value = false
}

defineExpose({
  open
})

</script>